@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('重置密码') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('reset-password') }}" aria-label="{{ __('Reset Password') }}">
                        @csrf
                        <input id="resend-flag" name="resend" type="hidden" value="false">
                        <div class="form-group row">
                            <label for="phone_number" class="col-md-4 col-form-label text-md-right">{{ __('手机号') }}</label>

                            <div class="col-md-6">
                                <input id="phone_number" type="text" placeholder="请输入手机号" class="form-control{{ $errors->has('mobile') ? ' is-invalid' : '' }}" name="mobile" value="{{ old('mobile') }}" required>

                                @if ($errors->has('mobile'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('mobile') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="code" class="col-md-4 col-form-label text-md-right">{{ __('验证码') }}</label>

                            <div class="col-md-4">
                                <input id="code" type="text" placeholder="请输入验证码" class="form-control" name="confirmation-code" required>
                            </div>
                            <div class="col-md-2">
                                <button type="button" id="send-confirm" class="btn btn-primary">
                                    {{ __('发送验证码') }}
                                </button>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('密码') }}</label>

                            <div class="col-md-6">
                                <input id="password" placeholder="请输入密码" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('确认密码') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" placeholder="请重复密码" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('重置') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
    <script type="text/javascript">
      var timeIntervalId = 0
      var timer = 60
      $('#send-confirm').on('click', function () {
        var phone = $('#phone_number').val()
        var resend = $('#resend-flag').val()
        if (!phone) {
          alert('请填写手机号码')
        } else {
          window.axios.post('{{ url('auth/update-password-send-sms-code-by-aliyun') }}', {mobile: phone, resend: resend})
          .then(function (result) {
            console.log(result)
            if (result == 'no_captcha') {
              location.reload()
            } else if (result == 'overtime') {
              alert('验证码一分钟内有效，请勿重复发送')
            } else {
              $('#send-confirm').removeClass('code-button')
              $('#send-confirm').addClass('code-button-disable')
              $('#send-confirm').prop('disabled', true)
              timer = 60
              timeIntervalId = setInterval('onTimeout()', 1000)
            }
          }).catch(function (error) {
            if (error.response) {
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              console.log(error.response.data)

              alert(error.response.data.errors.mobile[0])
            } else {
              // Something happened in setting up the request that triggered an Error
              window.alert(error.message)
            }
          })
        }
      })
      function onTimeout () {
        if (timer > 0) {
          $('#send-confirm').text('重新发送(' + timer + ')')
          timer--
        } else {
          clearInterval(timeIntervalId)
          $('#resend-flag').val(true)
          $('#send-confirm').text('重新发送')
          $('#send-confirm').addClass('code-button')
          $('#send-confirm').removeClass('code-button-disable')
          $('#send-confirm').prop('disabled', false)
        }
      }
    </script>
@endpush
